<template>
	<view>
		<uni-nav-bar left-icon="left" statusBar backgroundColor="#F5F7F8" fixed @clickLeft="back"
			right-icon="more-filled" @clickRight="allread" title="消息中心" />
		<view class="message-list">
			<mescroll-body height="500px" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption">
				<view class="">
					<uni-swipe-action>
						<view class="" style="margin-bottom: 30rpx;" v-for="(item,index) in data" :key="index">
							<uni-swipe-action-item @click="silderClick($event,item,index)" :right-options="options">
								<view class="item-message" @click="toDetail(item)">
									<view class="message-type">
										<uni-badge absolute="rightTop" class="message-title"
											:text="item.status == 1?1:0" :is-dot="true">
											<view class="message-title">{{item.title}}</view>
										</uni-badge>
										<view class="message-info">{{item.create_time}}</view>
									</view>
								</view>
							</uni-swipe-action-item>
						</view>
					</uni-swipe-action>
				</view>
			</mescroll-body>
		</view>
		<u-modal v-model="show" @confirm="confirm" show-cancel-button :content="content"></u-modal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				// 滚动数据初始化
				visible_height: 60,
				solt_height: 0,
				page: 1,
				hasMore: true,
				data: [],
				data_number: 0,
				type: 0,
				downOption: {
					auto: false
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				show: false,
				content: '是否设置全部已读',
				tapindex:0
			}
		},
		onLoad(option) {
			this.type = option.type
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			allread() {
				var that = this
				uni.showActionSheet({
					itemList: ['全部已读', '全部删除'],
					success: function(res) {
						that.tapindex = res.tapIndex
						if (res.tapIndex == 0) {
							that.content = '是否设置全部已读'
							that.show = true

						} else {
							that.content = '是否设置全部删除？'
							that.show = true
						}
					},
					fail: function(res) {
						// console.log(res.errMsg);
					}
				});
			},
			confirm() {
				if(this.tapindex == 0){
					this.allReadMessage()
				}else{
					this.allDelMessage()
				}
			},
			allReadMessage() {
				let opts = {
					url: 'message/setAllOrderReadStatus',
					method: 'get'
				};
				this.request.httpTokenRequest(opts, {
					type:2
				}).then(res => {
					if (res.code == 0) {
						this.downCallback()
					}
				}, error => {

				})
			},
			allDelMessage() {
				let opts = {
					url: 'message/delAllOrderMsg',
					method: 'get'
				};
				this.request.httpTokenRequest(opts, {
					type:2
				}).then(res => {
					if (res.code == 0) {
						this.downCallback()
					}
				}, error => {

				})
			},
			toTen() {
				uni.navigateTo({
					url: '/technician/index/index'
				})
			},
			silderClick(e, item, index) {
				this.delMessage(item, index)
			},

			delMessage(item, index) {
				let url = {
					url: "message/delSysMsg",
					method: "get"
				}
				this.request.httpTokenRequest(url, {
					id: item.id
				}).then(res => {
					if (res.code == 0) {
						this.data.splice(index, 1)
						this.$util.msg('删除成功')
						this.downCallback()
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			toDetail(item) {
				let that = this
				this.request.httpTokenRequest({
					url: "message/setSysReadStatus",
					method: "get"
				}, {
					id: item.id
				}).then(res => {
					if (res.code == 0) {
						item.status = 2
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			downCallback() {
				this.data = []
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				let url = {
					url: 'message/getTechnicianMessageList',
					method: "get"
				}
				this.request.httpTokenRequest(url, {
					page: page.num
				}).then(res => {
					if (res.code == 0) {
						this.data = [...this.data, ...res.data.data]
						this.mescroll.endSuccess(this.data.length,this.data.length == res.data.total?false:true);
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})

			}

		}
	}
</script>

<style lang="scss" scoped>
	.message-list {
		padding: 30rpx;
	}

	.item-message {
		display: flex;
		align-items: flex-start;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.message-icon {
			width: 142rpx;
			height: 190rpx;
			border-radius: 10rpx;
		}

		.message-type {
			margin-left: 23rpx;
			flex: auto;

			.message-title {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #656667;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				.status {
					width: 88rpx;
					height: 40rpx;
					background: #E2E2E2;
					border-radius: 10rpx;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #6D6F6F;
					text-align: center;
					line-height: 40rpx;
					margin-left: auto;
					flex: 0 0 auto;
				}

				.nosucces {
					background-color: #FCDBD4;
					color: #EF4C28;
				}
			}

			.message-info {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #656667;
				margin-top: 10rpx;
			}

			.immediate-action {
				width: 180rpx;
				height: 58rpx;
				border-radius: 29rpx;
				border: 1rpx solid #F16344;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #F16344;
				text-align: center;
				line-height: 58rpx;
				margin-left: auto;
				margin-top: 30rpx;
			}
		}
	}
</style>